<template>
    
    <div class="conter">
    <el-row>
        <el-col :span="12" :xs="0"></el-col>
         <el-col :span="12" xs="24">
            <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    status-icon
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
  >
  <h1>欢迎来到</h1>
    <el-form-item label="账号" prop="username">
      <el-input v-model="ruleForm.username" type="text"  :prefix-icon="User" />
    </el-form-item>
    <el-form-item label="密码"  prop="password">
      <el-input
        v-model="ruleForm.password"
        type="password"
     show-password
        :prefix-icon="Lock"
      />
    </el-form-item>
    <el-form-item>
        <div class="loginbt" >
      <el-button  type="primary" @click="login">
        登录
      </el-button>
      <el-button >重置</el-button>
      </div>
    </el-form-item>
  </el-form>
         </el-col>
    </el-row>
    </div>
   
</template>
<script setup lang="ts">
import { ref } from 'vue';

import {  Lock, User} from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import  {useUserStore}  from "../../stores/module/user";
 import { useRouter } from 'vue-router';
 import 'element-plus/theme-chalk/el-message.css'
const useStore=useUserStore()
const ruleForm=ref({
    username:'admin',
    password:'111111'
})
const router=useRouter()
const ruleFormRef=ref()

const rules=ref({
     username: [ { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 3, max: 5, message: '输入账号 be 3 to 5', trigger: 'blur' },],
  password: [ { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 3, max: 6, message: '输入密码 be 3 to 6', trigger: 'blur' },],
  
})

const login= ()=>{
  ruleFormRef.value.validate(async(valid:any)=>{
  
    if(valid){
      try{
         await useStore.userLogin(ruleForm.value)
        router.push('/')
        ElMessage({
          type:'success',
          message:'成功',
          
        })
        console.log(useStore.usertoken)
      }
      catch(error){
        console.log(error)
        ElMessage({
          type:'error',
          message:error.message
        })

      }
     
 
      
  
    
    
    }else{
      ElMessage({
        type:'error',
        message:'登录失败'
      })
    }

  })
    

}
</script>
<style scoped lang="scss">

.conter{
    background-image: url('/src/assets/images/background.jpg');
    background-repeat: no-repeat;
    background-size:cover;
    width: 100%;
    height: 100vh;
    
}
.demo-ruleForm{
    background-image: url(/src/assets/images/login_form.png) ;
    background-repeat: no-repeat;
     background-size:cover;
     text-align: center;
     margin-top: 200px;
   
    
     
}
.loginbt{
    margin: 0 auto;;
  
}

</style>